<template>
    <div class="address">
        <div class="container">
            <router-link class="return" to="/settlement">
                <i></i>
            </router-link>
            <van-address-list 
                v-model="chosenAddressId" 
                :list="list" 
                :disabled-list="disabledList"
                disabled-text="以下地址超出配送范围" 
                default-tag-text="默认" 
                @add="onAdd" 
                @edit="onEdit"
                 />
        </div>
    </div>
</template>

<style lang="less" scoped>
.van-tag--danger, 
.van-button--danger {
    background-color: #1EC28A;
    border-color: #1EC28A;
}

.van-address-item {
    border: 1px solid #ccc;
}

.return i {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../assets/img/return.png) no-repeat center/cover;
    margin-top: 20px;
    margin-left: 10px;
}

/* 新增复选框绿色样式 */
.van-radio__icon {

    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid #1EC28A; /* 边框颜色 */
    border-radius: 50%; /* 圆形 */
    position: relative;
}

.van-radio__icon--checked {
    background-color: #1EC28A; /* 选中状态背景颜色 */
}

.van-radio__icon--checked:before {
    content: '';
    display: block;
    width: 12px; /* 内部复选缩小 */
    height: 12px;
    background: white; /* 复选框中心为白色 */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

<script>
import { Toast } from 'vant';

export default {
    data() {
        return {
            chosenAddressId: '1',
            list: [
                { id: '1', name: '吴先生', tel: '15350289607', address: '广州市从化区粤嵌科技', isDefault: true },
                { id: '2', name: '李四', tel: '1310000000', address: '浙江省杭州市拱墅区莫干山路 50 号' }
            ],
            disabledList: [
                { id: '3', name: '王五', tel: '1320000000', address: '浙江省杭州市滨江区江南大道 15 号' }
            ],
        };
    },
    methods: {
        onAdd() {
            Toast('新增地址');
        },
        onEdit(item, index) {
            if (item && index >= 0) {
                Toast('编辑地址: ' + index);
            } else {
                Toast('编辑地址失败: 无效的数据');
            }
        },
    },
};
</script>

